<script setup>
  import {ref} from "vue";
  import {ChatRound, Position,} from "@element-plus/icons-vue";
  import store from "../../../store/index.js";
  import { ElNotification} from "element-plus";

  let data=ref('')
  let placeHolderContentCommon='请提出您的问题(按ENTER发送)...'
  function sendQuestion(){
    if (data.value===''){ElNotification({title: 'Info', message: '输入不可以为空', type:'info'})}
    else{
      store.dispatch("moduleQuestion/pushQuestion", {'question': data.value})
      console.log(data.value)
      console.log(store.state.moduleQuestion.questionArray)
    }
    data.value=''
  }
  function autoAsk(index){
    data.value=store.state.moduleQuestion.autoAskArray[index]
    sendQuestion()
  }

</script>

<template>
  <div class="main-ask">
    <div style="display: flex">
      <el-input  class="main-input animate__animated  animate__lightSpeedInLeft" v-model="data" :prefix-icon="ChatRound" size="large"
                 :suffix-icon="Position" :placeholder="placeHolderContentCommon"
                 @keyup.enter="sendQuestion">
      </el-input>
    </div>
  </div>

</template>

<style scoped>
  .main-ask{
    position: fixed;
    bottom:0;
    background-color: rgb(244,244,244);
    width: 100%;
  }
  .main-input{
    border: 1.5px solid black;
    border-radius: 5px;
    font-size: medium;
    --el-color-primary:white;
    box-shadow: var(--el-box-shadow-light);
    color: black;
    margin: auto;
    width: 100%;
  }
</style>

<style>

</style>